<template>
	<div class="flex_box_between">
    <el-select v-model="provinceid" placeholder="请选择" class="addr_select" @change="provinceChange">
      <el-option
        v-for="item in provinceList"
        :key="item.region_id"
        :label="item.region_name"
        :value="item.region_id">
      </el-option>
    </el-select>
    <el-select v-model="cityid" placeholder="请选择" class="addr_select" @change="cityChange">
      <el-option
        v-for="item in cityList"
        :key="item.region_id"
        :label="item.region_name"
        :value="item.region_id">
      </el-option>
    </el-select>
    <el-select v-model="districtid" placeholder="请选择" class="addr_select" @change="districtChange">
      <el-option
        v-for="item in districtList"
        :key="item.region_id"
        :label="item.region_name"
        :value="item.region_id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
	import formOperate from '@/layout/mixin/formOperate'
  export default {
    mixins: [formOperate],
		mounted() {
			this.getAddress(0,'1')
			this.getAddress(1,this.provinceid)
      this.getAddress(2,this.cityid)
			this.$nextTick(() => {
				this.areaEmit()
			})
		},
		methods:{
      clearVal() {
        this.provinceid = ''
        this.cityid = ''
        this.districtid = ''
      },
			provinceChange(e) {
        this.provinceid = e
        this.cityid = ''
        this.districtid = ''
        this.cityList = []
        this.districtList = []
        this.getAddress(1,e)
      },
      cityChange(e) {
        this.cityid = e
        this.districtid = ''
        this.districtList = []
        this.getAddress(2,e,()=>{
          this.areaEmit()
        })
      },
      districtChange(e) {
        this.districtid = e
        this.areaEmit()
      },
      areaEmit() {
        let val = {provinceid:this.provinceid,cityid:this.cityid==-1?'':this.cityid,districtid:this.districtid==-1?'':this.districtid}
        this.$emit('addrChange',val)
      },
      // 修改时更新当前数据
      updateData(area) {
				this.provinceid = area.pid || ''
				this.cityid = area.cid || ''
        this.districtid = area.did || ''
				this.province = area.pname
				this.city = area.cname
				this.district = area.dname
        this.addr = area.pname+area.cname+area.dname
        this.getAddress(1,this.provinceid)
        this.getAddress(2,this.cityid)
			}
		}
	}
</script>
<style scoped>
  .addr_select{
    flex:1;
    min-width: 0;
    margin-right: 10px;
  }
  .addr_select:last-child{
    margin:0;
  }
</style>

